{include file="$header"}
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-search">
            <el-form ref="search" :model="search" inline>
                <el-form-item prop="keyword">
                    <el-input v-model="search.keyword" placeholder="{:lang('keyword')}"></el-input>
                </el-form-item>
                <el-form-item prop="modular">
                    <el-select v-model="search.modular" placeholder="{:lang('category')}">
                        <el-option label="{:lang('all')}" value=""></el-option>
                        {volist name="modulars" id="item"}
                        <el-option label="{$item.title}" value="{$item.catalog}"></el-option>
                        {/volist}
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchList()">{:lang('search')}</el-button>
                </el-form-item>
            </el-form>
            <div class="list">
                <el-empty v-if="count === 0" description="没有找到匹配的结果"></el-empty>
                <el-row>
                    <el-col :span="24" v-for="(item, index) in data" style="margin-bottom: 20px">
                        <el-card class="item">
                            <div class="title" v-html="item.title"></div>
                            <div class="description" v-html="item.description"></div>
                            <div class="time">
                                <span>{{item.create_time}}</span>
                                <a :href="item.url">{{lang('read more')}}</a>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-pagination
                    @current-change="pageChange"
                    :current-page="search.page"
                    :page-size="10"
                    :total="count"
                    layout="total,prev, pager, next, jumper"
                    background
                    :hide-on-single-page="true">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                data: [],
                count: 0,
                search:{
                    page: 1,
                    keyword:  locationUrl.get('keyword'),
                    modular:  locationUrl.get('modular'),
                },
                loading: false,
            }
        },
        created() {
            this.list();  
        },
        methods: {
            /**
             * 加载列表
             */
            list() {
                let self = this;
                self.loading = true;
                request.post('search', self.search, function (res) {
                    if (res.status === 'success') {
                        self.data  = res.data;
                        self.count = res.count;
                    }
                    self.loading = false;
                })
            },
            pageChange(page) {
                this.search.page = page;
                this.list();
            },
            /**
             * 搜索
             */
            searchList() {
                location.href = url('search', {keyword: this.search.keyword, modular: this.search.modular});
            },
        }
    });
</script>
</body>
</html>